<template>
    <template v-if="!item.meta?.hidden">
        <!-- 无子菜单或只有一个子菜单 -->
        <el-menu-item v-if="!item.children || item.children.length === 0" :index="safePath">
            <el-icon v-if="item.meta?.icon">
                <component :is="item.meta.icon" />
            </el-icon>
            <template #title>{{ item.meta?.title }}</template>
        </el-menu-item>

        <!-- 嵌套子菜单 -->
        <el-sub-menu v-else :index="safePath">
            <template #title>
                <el-icon v-if="item.meta?.icon">
                    <component :is="item.meta.icon" />
                </el-icon>
                <span>{{ item.meta?.title }}</span>
            </template>
            <sidebar-item v-for="child in item.children" :key="child.path" :item="child" :base-path="safePath" />
        </el-sub-menu>
    </template>
</template>

<script setup>
import { computed } from 'vue'
import { isExternal } from '@/utils/validate.js'
import { resolvePath } from '@/utils/path.js'

const props = defineProps({
    // 传入的路由对象，必须包含path属性
    item: {
        type: Object,  // 这里使用Object类型，确保传入的是一个对象
        required: true,
        validator(value) {
            return !!value.path // 确保必须包含path属性
        }
    },
    basePath: {
        type: [String, Number], // 允许数字类型自动转换
        default: ''
    }
})


// 确保获取的是路由对象的path属性
const safePath = computed(() => {
    // 如果是外部链接，直接返回
    if (isExternal(props.item.path)) {
        // 确保传入的是路径字符串
        return props.item.path
    }
    // 确保传入的是路径字符串
    return resolvePath(props.basePath, props.item.path)
})
</script>